import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

class PhonePage extends StatefulWidget {
  const PhonePage({Key? key}) : super(key: key);

  @override
  State<PhonePage> createState() => _PhonePageState();
}

class _PhonePageState extends State<PhonePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("电话小控件")
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
             PhoneWidget(
               phone: "1234567",
               clickAction:(String phone){
                 print("点击事件");

               }
             )
          ],
        ),
      ),
    );

    
  }
}

// 定义 电话小控件
class PhoneWidget extends StatefulWidget{
  final Function(String phone) clickAction;
  final String phone;
  PhoneWidget({Key? key,required this.clickAction,required this.phone}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PhoneWidgetState();
  }
}

class _PhoneWidgetState extends State<PhoneWidget>{
  bool _isDown = false;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
    
      // 点击事件
      onTap: (){
        if(widget.clickAction != null){
          widget.clickAction(widget.phone);
        }
      },
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(4)),
          border: Border.all(color: Colors.blue)
        ),
        child: Row(
          // 包裹  理解加深
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              child: Icon(Icons.phone,size: 25,),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(4),
                  bottomLeft: Radius.circular(4)
                )
              ),
            ),
            SizedBox(width: 10),
            Text(
              "${widget.phone}",
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: Colors.blue,
              ),
            ),
            SizedBox(width: 10),
          ],
        ),
      ),
      

    );
  }
}